{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
    <div class="page__bd" style="height: 100%">
        <div class="weui-tab">
            <div class="weui-navbar">
                <a class="weui-navbar__item" href="{:url('Index/reward_order')}">
                    订单奖励
                </a>
                <a class="weui-navbar__item" href="{:url('Index/reward_team')}">
                    团队奖励
                </a>
                {if condition="$grade ==2"}
                <a class="weui-navbar__item weui-bar__item_on" href="{:url('Index/reward_leader')}">
                    额外件数奖励
                </a>
                {/if}
            </div>
            <div class="weui-tab__panel" id="ajaxForm">

                <div class="weui-panel">
                    <div class="weui-panel__bd">
                        <div class="weui-media-box weui-media-box_text" style="text-align: center;">
                            <div class="weui-wepay-color-lightblue">
                                <input type="text" id='dataTime' value="{$year} {$month}" style="width: 70px;border:0;color: #1c7efb" /> <i class="fa fa-angle-down"></i>
                            </div>
                            <div class="weui-flex">
                                <div class="weui-flex__item">
                                    <h4 class="weui-media-box__title">当月奖励</h4>
                                    <p class="weui-media-box__desc" id="month">100</p>
                                </div>
                                <div class="weui-flex__item">
                                    <h4 class="weui-media-box__title">总奖励</h4>
                                    <p class="weui-media-box__desc" id="total">100</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="weui-cells" id="listData">
                    
                </div>

            </div>
            <div class="weui-tabbar">
                <a href="{:url('Index/home')}" class="weui-tabbar__item weui-bar__item_on">
                    <div class="weui-tabbar__icon">
                        <i class="fa fa-home"></i>
                    </div>
                    <p class="weui-tabbar__label">主页</p>
                </a>
                <a href="{:url('Index/goods')}" class="weui-tabbar__item">
                    <div class="weui-tabbar__icon">
                        <i class="fa fa-list"></i>
                    </div>
                    <p class="weui-tabbar__label">下单</p>
                </a>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript">
    query();
    function query(){
    	$.ajax({
            url: '/api/v1/member/leader_rewards',
            type: 'GET',
            dataType: 'json',
            data:{
                date: $("#dataTime").val()
            }
        })
        .done(function(json) {
            console.log("success");
            initPageHTML("ajaxForm",json.data);
            renderData("#listData",json.data.list);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    }
    
 // 渲染列表
    function renderData(_elment,_data){
        $(_elment).empty();
        for(var i= 0; i<_data.length;i++){
            var _item =
            ' <div class="weui-wepay-details">\
                    <div class="weui-wepay-details__hd">\
                        <div class="weui-wepay-detail">\
                            <div class="weui-wepay-detail__bd">支付人:'+_data[i].payer+'</div>\
                            <div class="weui-wepay-detail__ft weui-wepay-color-orgin">+'+_data[i].money+'</div>\
                        </div>\
                    </div>\
                    <div class="weui-wepay-details__bd">\
                        <div class="weui-wepay-detail weui-wepay-detail_primary">\
                            <div class="weui-wepay-detail__bd">团队业绩（件数）：</div>\
                            <div class="weui-wepay-detail__ft">'+_data[i].count+'</div>\
                        </div>\
                        <div class="weui-wepay-detail weui-wepay-detail_primary">\
                            <div class="weui-wepay-detail__bd">返利类型：</div>\
                            <div class="weui-wepay-detail__ft">'+_data[i].type+'</div>\
                        </div>\
                        <div class="weui-wepay-detail weui-wepay-detail_primary">\
                            <div class="weui-wepay-detail__bd">返利月份：</div>\
                            <div class="weui-wepay-detail__ft">'+_data[i].month+'</div>\
                        </div>\
                        <div class="weui-wepay-detail weui-wepay-detail_primary">\
                            <div class="weui-wepay-detail__bd">返利时间：</div>\
                            <div class="weui-wepay-detail__ft">'+_data[i].time+'</div>\
                        </div>\
                        <div class="weui-wepay-detail weui-wepay-detail_primary">\
                            <div class="weui-wepay-detail__bd">状态：</div>\
                            <div class="weui-wepay-detail__ft">'+_data[i].status+'</div>\
                        </div>\
                    </div>\
                </div>';

            $(_elment).append(_item);
        }
    }
     
     var years = [];
     var year = 2018;
    for(i = 0 ;i < 10;i++){
         years.push(year+"年")
         year++
     } 
     var months = [];
     for (i = 1;i <=12;i++){
         months.push(i+'月')
     }
    // $("#picker-month").picker("setValue", ["{$year}", "{$month}"]);
    var curYear = "{$year}";
    var curMonth = "{$month}";
     $("#dataTime").picker({
           value:[curYear,curMonth],
           title: "请选择月份",
           cols: [
             {
               textAlign: 'center',
               values: years
             },
             {
               textAlign: 'center',
               values: months
             },
           ],
           onChange: function (p, values, displayValues) {
             console.log(values, displayValues);
             $("#dataTime").val(values[0])
             $("#dataTime").picker("setValue", [values[0],values[1]]);
           } ,
           onClose:function(p, values, displayValues) {
               query()
           }
         });

     
 //重置浏览器回退链接
browserBack("home.html");
</script>
{/block}